<template>
	<div id="cjbox">
		<div class="cjTop">
			<div class="cjTL">
				<router-link to="/">首页</router-link> >
				<router-link to="/Changjing">场景 ></router-link>
				{{arr1.scene_title}}
			</div>
			<div class="cjTR">
				<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/menu.png" width="100%"/>
			</div>
		</div>
		
		<div class="cjTitle" >
			<div class="cjT1">
				<img src="http://img.szzhangchu.com/1456975926070_4969755890.jpg@480h_640w_1e_1c.jpg"/>
				<div class="cjbg"></div>
				<div class="cjTp">
					<p>#157道菜#</p>
					<p>最美的不是下午茶，是坐在我对面微笑的你。</p>
				</div>
			</div>
			
			<div class="cjmain">
				<ul>
					<li v-for="x in xwcArr" class="cjli">
						<span class="Collection" :class="{'CollectionRed':x.sc}" @click="gaibian(x)">收藏</span>
						<a :href="x.share_url">
							<div class="cjmL">
		           					<img :src="x.image"/>
		           					<span class="cjico"></span>
							</div>
							<div class="cjmR">
								<p class="cjmR1">{{x.dishes_name}}</p>
								<p class="cjmR2">{{x.dishes_desc}}</p>
								<p class="cjmR3"><span v-for="n in x.tags_info">{{n.text}}</span></p>
							</div>
						</a>
						
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from "vue"
	export default {
		data(){
			return {
				arr1:[]
			}
		},
		computed:{
			xwcArr(){
				return this.$store.state.xiawuArr
			}
			
		},
		mounted(){
			this.$nextTick(function(){
				this.$store.commit("getXWCData")
			})
		},
		methods:{
			gaibian(x){
				 if(this.$store.state.loginstate == true ){
                     if(typeof x.sc == "undefined"){
						Vue.set(x,"sc",true);
//						this.$set(x,"sc",true)
						}else{
							x.sc = !x.sc
						}
                 }else{
                     console.log(this.$store.state.loginstate);
                     alert("请先登录")
                     this.$router.push({
                         path: '/Login'
                     })
                 }
				
			}
		}
	}
</script>

<style>
	#cjbox{
		width: 100%;
		background: #f8f8f8;
	}
	.cjTop{
		width: 100%;
		height: 0.8rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.3rem;
		padding-left: 0.2rem;
		background: #fff;
	}
	.cjTR{
		width: 0.6rem;
	}
	.cjTitle{
		width: 100%;
		font-size: 0.28rem;
		color: #fff;
	}
	.cjTitle img{
		width: 100%;
	}
	.cjT1{
		width: 100%;
		position: relative;
	}
	.cjTitle .cjbg{
		width: 100%;
		height: 2rem;
		position: absolute;
		bottom: 0;
		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
	}
	.cjT1{
		margin-bottom: 0.1rem;
	}
	.cjT1 .cjTp{
		line-height: 0.5rem;
		width: 100%;
		position: absolute;
		bottom: 0.15rem;
		text-align: center;
	}
	
	.cjmain{
		width: 100%;
		padding: 0.2rem 0.2rem;
		background: #fff;
	}
	.cjmain ul{
		width: 100%;
	}
	.cjmain li>a{
		display: block;
		width: 100%;
		height: 1.6rem;
		display: flex;
		color: #000;
		margin-bottom: 0.2rem;
	}
	.cjmL{
		width: 40%;
		position: relative;
	}
	.cjmL img{
		max-width: 100%;
		height: 100%;
	}
	.cjico{
		display: block;
		width: 0.5rem;
		height: 0.5rem;
		background: url("http://pub.szzhangchu.com/web/v4.2/images/ico/ico-play.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 30%;
		margin-left: 1rem;
	}
	.cjmR{
		margin-left: 0.15rem;
		width: 60%;
		overflow: hidden;
	}
	.cjmR2{
		height: 0.61rem;
		overflow: hidden;
		margin-top: 0.03rem;
		font-size: 0.23rem;
		color: #a3a3a3;
	}
	.cjmR3{
		margin-top: 0.1rem;
	}
	.cjmR3 span{
		    text-align: center;
		    color: #ff8f5c;
		    font-size: 0.23rem;
		    display: inline-block;
		    border-radius: 0.3rem;
		    border: 1px solid #ff8f5c;
		    padding: 0.01rem 0.15rem;
		    margin-right: 0.1rem;
		    margin-bottom: 0.1rem;
	}
	.Collection{
		position: absolute;
		display: block;
		width: 0.7rem;
		height: 0.4rem;
		line-height: 0.4rem;
		/*background-image: url('/static/imgs/sc.png') no-repeat;*/
		/*background: #777777;*/
		background-size: 100% 100%;
		top: -0.1rem;
		right: -0.1rem;
		z-index: 2;
		font-size: 0.22rem;
		text-align: center;
		border: 1px solid;
		color: #777777;
		border-radius: 0.1rem;
	}
	.CollectionRed{
		background: red;
		color: #fff;
	}
	.cjli{
		position: relative;
		margin-bottom: 0.1rem;
	}
</style>